<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        color: black;
        text-decoration: none;
        cursor: pointer;
    }
    /* 头部 */
    .tou{
        height: 80px;
        width: 1000px;
        margin: 0 auto;
        position: absolute;
        left: 0;
        right: 0;
        z-index: 2;
    }
    .oppoz{
        font-size: 30px;
        margin-right: 100px;
        color: rgb(128, 128, 128);
    }
    .tou .tou-item{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        display: flex;
        justify-content: space-around;
        align-items: center;
    }
    .tou-item li a {
            display: block;
            cursor: pointer;
            /* opacity: .56; */
            color: rgb(128, 128, 128);
            /* z-index: 9; */
        }
    .tou-item li a:hover {
           color: black;
           /* opacity: 1; */
        }
    /* 轮播图 */
    .lunbtu{
        position: relative;
        overflow: hidden;
    }
    .lunbtu-item{
        width: 100%;
        height: 500px;
        float: left;
    }
   .lunbtu img{
       width: 100%;
       height: 100%;
    }
   .lunbtu .yuan{
       position: absolute;
       text-align: center;
       bottom: 15px;
       left: 0;
       right: 0;
   }
   .lunbtu .yuan i{
       display: inline-block;
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background-color: white;
       margin: 0 12px;
       cursor: pointer;
   }
   /* 更多新品 */
   .gdxpin-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 90%;
    margin-top:100px;
    margin: auto;
    height: 200px;
    /* line-height: 200px; */
   }
   .gdxpin-item .gdxp{
    font-size: 50px;
   }
   .gdxpin-item .faxian{
      text-decoration:underline;
   }
   /* tp */
   .gdxpin-img{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 800px;
   }
   .gdxpin-img .img-left{
    width: 881px;
    height: 800px;
    overflow: hidden;
   }
   .gdxpin-img .img-left1{
    width: 440px;
    height: 800px;
    overflow: hidden;
   }
   .gdxpin-img .img-right1{
    width: 881px;
    height: 800px;
    overflow: hidden;
    margin-left: 50px;
   }
   .gdxpin-img .img-right{
    width: 440px;
    height: 800px;
    overflow: hidden;
    margin-left: 50px;
   }
   .gdxpin-img img{
    width: 100%;
    transform: scale(1.1);
    transition: transform .3s linear;
    display: block;
   }
   .gdxpin-img img:hover{
    transform: scale(1);
   }
   .gdxpin-img .title{
     margin-top: 40px;
   }
   .gdxpin-img .title a{
    font-size: 20px;
   }
   .gdxpin-img .title .tag{
    margin-left: 20px;
    color: rgb(36, 190, 36);
   }
   .gdxpin-img .desc{
    font-size: 14px;
    margin-top: 10px;
   }
   .gdxpin-img .cart-price{
    margin-top: 14px;
   }
   .gdxpin-img .butt{
      width: 240px;
      height: 50px;
   }
   .gdxpin-img .butt .ljgd{
    line-height: 50px;
    background-color: black;
    color: white;
   }
   .gdxpin-img .butt .buy{
    text-decoration:underline;
    margin-left: 10px;
   }
   /* 智能硬件 */
   .znyjian{
    background-color: rgb(230, 230, 230);
    display: flex;
    justify-content: center;
   }
   .znyjian .img-left2{
    width: 676px;
    height: 800px;
    overflow: hidden;
   }
   .znyjian .img-right2{
    width: 338px;
    height: 800px;
    overflow: hidden;
   }
   .znyjian img{
    width: 100%;
    transform: scale(1.1);
    transition: transform .3s linear;
    display: block;
   }
   .znyjian img:hover{
    transform: scale(1);
   }
   .znyjian .title{
     margin-top: 40px;
   }
   .znyjian .title a{
    font-size: 20px;
   }
   .znyjian .title .tag{
    margin-left: 20px;
    color: rgb(36, 190, 36);
   }
   .znyjian .desc{
    font-size: 14px;
    margin-top: 10px;
   }
   .znyjian .cart-price{
    margin-top: 14px;
   }
   .znyjian .butt{
      width: 240px;
      height: 50px;
   }
   .znyjian .butt .ljgd{
    line-height: 50px;
    background-color: black;
    color: white;
   }
   .znyjian .butt .buy{
    text-decoration:underline;
    margin-left: 10px;
   }
   /* 探索OPPO */
   .disabled-item{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 1px solid black;
    line-height: 50px;
    text-align: center;
    margin-left: 10px;
   }
   .disabled-item:active{
    border: 1px solid gray;
   }
   .swiper-container {
        white-space: nowrap;
        font-size: 0;
        transition: transform .3s linear;
    }

    .swiper-container .item {
        display: inline-block;
        margin-right: 20px;
        width: 424px;
        height: 282px;
        box-sizing: border-box;
        cursor: pointer;
    }

    .swiper-container .item video {
        width: 100%;
    }

    .swiper-container .img-box {
        position: relative;
        overflow: hidden;
    }

    .swiper-container .video img {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        z-index: 9;
    }

    .swiper-container .item img {
        width: 100%;
        transform: scale(1.1);
    }

    .swiper-container .video img {
        transition: opacity .3s linear;
    }

    .swiper-container .item .video-box {
        opacity: 0;
        transition: opacity .3s linear;
    }

    .discover-title {
        font-variation-settings: 'wght'750;
        font-size: 20px;
        line-height: 30px;
        padding: 8px 0;
    }

    .discover-intro {
        font-size: 14px;
        line-height: 24px;
        word-wrap: break-word;
    }
    .swiper-container{
        overflow: hidden;
        height: 500px;
    }
    .swiper-container .item .learn-more {
        display: inline-block;
        padding-top: 8px;
        height: 24px;
        border-bottom: 1px solid #000;
    }

    .swiper-container .item .learn-more a {
        font-size: 14px;
        font-weight: 400;
    }

    /* 探索-图片的相关行为 */
    .swiper-container .img img {
        transition: transform .3s linear;
    }

    .swiper-container .img img:hover {
        transform: scale(1);
    }
    /* 底部*/
    .dibu{
        margin-top: 50px;
        display: flex;
        justify-content: space-around;
        align-items: center ;
        
    }
    .dibu-size{
        font-size: 15px;
        color: gray;
    }
</style>
<body> 
    <!-- 头部 -->
    <div class="tou">
       <ul class="tou-item">
        <em class="oppoz">OPPO</em>
          <li>
            <a >手机</a>
          </li>
          <li>
            <a>智能硬件</a>
          </li>
          <li>
            <a>欢太商场</a>
          </li>
          <li>
            <a>关于OPPO</a>
          </li>
          <li>
            <a>ColorOS</a>
          </li>
          <li>
            <a>服务</a>
          </li>
          <li>
            <a>企业业务</a>
          </li>
       </ul>
    </div>
    <!-- 轮播图 -->
    <div class="lunbtu">
         <div class="lunbtu-item">
              <img src="./imgs/1.jpg" alt="">
              <img src="./imgs/2.jpg" alt="">
              <img src="./imgs/3.jpg" alt="">
              <img src="./imgs/1.jpg" alt="">
         </div>
       <div class="yuan">
           <i class="lunbtu-yuan"></i>
           <i></i>
           <i></i>
       </div>
    </div>
    <!-- 更多新品 -->
    <div class="gdxpin">
         <div class="gdxpin-item">
            <p class="gdxp">更多新品</p>
            <p class="faxian"><a href="https://www.oppo.com/cn/smartphones/">查看全部手机</a></p>
         </div>
    </div>
    <div class="gdxpin-img">
        <div class="img-left">
            <a href="#">
                <img src="./imgs/Reno6 pro plus-middlebanner-blue-1600x1068-v2-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">Reno6 Pro+</a>
                <span class="tag">新品</span>
            </div>
            <h3 class="desc">索尼 IMX766 传感器，骁龙 870 芯片</h3>
            <div class="cart-price"><span>3999元起</span></div>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
        <div class="img-right">
            <a href="#">
                <img src="./imgs/Reno6-middlebanner-black-1340x1786-v3-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">Reno6</a>
                <span class="tag">新品</span>
            </div>
            <h3 class="desc">焕采光斑人像视频，65W 超级闪充</h3>
            <div class="cart-price"><span>2799元起</span></div>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
    </div>
    <div class="gdxpin-img">
        <div class="img-left1">
            <a href="#">
                <img src="./imgs/K9-middlebanner-black-1340x1786-v3-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">OPPO K9</a>
                <span class="tag">热销</span>
            </div>
            <h3 class="desc">充电 5 分钟，开黑 2 小时</h3>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
        <div class="img-right1">
            <a href="#">
                <img src="./imgs/Find X3-middlebanner-moka-1600x1068-v2-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">Find X3 系列</a>
                <span class="tag">热销</span>
            </div>
            <h3 class="desc">宇宙摩卡，浪漫上市</h3>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
    </div>
    <!-- 智能硬件 -->
    <div class="gdxpin" style="background-color: rgb(230, 230, 230);">
        <div class="gdxpin-item">
        <p class="gdxp">智能硬件</p>
        <p class="faxian"><a href="https://www.oppo.com/cn/smartphones/">查看全部智能硬件</a></p>
        </div>
    </div>
   <div class="znyjian">
        <div class="img-left2">
            <a href="#">
                <img src="./imgs/TV K9-middlebanner-black-1600x1068-v2-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">OPPO 智能电视 K9</a>
                <span class="tag">新品</span>
            </div>
            <h3 class="desc">十亿色彩，十分出彩</h3>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
        <div class="img-right2">
            <a href="#">
                <img src="./imgs/Enco free2-middlebanner-white-1340x1786-v3-pc.jpg" alt="">
            </a>
            <div class="title">
                <a href="#">OPPO Enco Free2</a>
                <span class="tag">新品</span>
            </div>
            <h3 class="desc">个性化降噪，每一刻都美妙</h3>
            <div class="butt">
                <a href="#" class="ljgd">了解更多</a>
                <a href="#" class="buy">立即购买</a>
            </div>
        </div>
   </div>
   <!-- 探索 OPPO -->
    <div class="gdxpin" style="background-color: rgb(224, 240, 244);">
        <div class="gdxpin-item">
            <p class="gdxp">探索OPPO</p>
            <p class="faxian">
                <a href="jaxascript:;" class="disabled">
                    <em class="disabled-item">←</em>
                </a>
                <a href="jaxascript:;" class="disabled">
                    <em class="disabled-item">⇢</em>
                </a>
            </p>
        </div>
        <div class="swiper-container">
            <div class="item video">
                <div class="img-box">
                    <img alt="Reno 视频同学录大赛 | 前往微博参与" src="./imgs/Reno6-universe-v3-pc.jpg">
                    <div class="video-box">
                        <video preload="auto" autoplay="autoplay" playsinline muted loop="loop"
                            windowlessvideo="true" src="./videos/kv-video-cover-1-v2.mp4"></video>
                    </div>
                </div>
                <p class="discover-title">探索 Reno 系列</p>
                <p class="discover-intro">在我眼里你会发光</p>
                <div class="learn-more">
                    <a href="https://www.oppo.com/cn/smartphones/series-reno/">了解更多</a>
                </div>
            </div>
            <div class="item img">
                <div class="img-box">
                    <img alt="线下体验店 | 查找附近体验店" src="./imgs/discovery-01.jpg">
                </div>
                <p class="discover-title">线下体验店</p>
                <p class="discover-intro">查找附近 OPPO 体验店，了解更多会员权益</p>
                <div class="learn-more">
                    <a href="https://www.oppo.com/cn/offline-stores/">了解更多</a>
                </div>
            </div>
            <div class="item img">
                <div class="img-box">
                    <img alt="O 学堂 | 立即报名摄影课程" src="./imgs/discovery-02.jpg">
                </div>
                <p class="discover-title">O学堂</p>
                <p class="discover-intro">立即报名摄影课程，一起发现生活中的美</p>
                <div class="learn-more">
                    <a href="https://support.oppo.com/cn/oschool-home/">了解更多</a>
                </div>
            </div>
            <div class="item img">
                <div class="img-box">
                    <img alt="会员日 | 参与每月 16～18 日活动" src="./imgs/discovery-03.jpg">
                </div>
                <p class="discover-title">会员日</p>
                <p class="discover-intro">参与每月 16-18 日会员日活动</p>
                <div class="learn-more">
                    <a href="https://support.oppo.com/cn/serviceday/">了解更多</a>
                </div>
            </div>
            <div class="item video">
                <div class="img-box">
                    <img alt="万物互融 | OPPO 随享，美好生活随时分享" src="./imgs/discovery-04.jpg">
                    <div class="video-box">
                        <video preload="auto" autoplay="autoplay" playsinline muted loop="loop"
                            windowlessvideo="true" src="./videos/kv-video-cover-5.mp4"></video>
                    </div>
                </div>
                <p class="discover-title" style="color:#000000;">万物互融</p>
                <p class="discover-intro" style="color:#000000;">OPPO 随享，美好生活随时分享</p>
                <div class="learn-more">
                    <a href="https://www.oppo.com/cn/events/iot/">了解更多</a>
                </div>
            </div>
            <div class="item img">
                <div class="img-box">
                    <img alt="活动 | 留住消失的色彩" src="./imgs/discovery-05.jpg">
                </div>
                <p class="discover-title">留住消失的色彩</p>
                <p class="discover-intro">与国家地理深度合作，致力保护濒危物种</p>
                <div class="learn-more">
                    <a href="https://events.oppo.com/cn/endangered-colour/">了解更多</a>
                </div>
            </div>
        </div>
    </div>
    <div class="dibu">
        <div class="dibu-item">
            <h3>推荐新品</h3>
            <ul class="dibu-size">
                <li>Find X3 系列</li>
                <li> Reno6 系列</li>
                <li> Ace2</li>
                <li>A95</li>
                <li>  K9</li>
                <li>Enco Air</li>
                <li>查看全部手机</li>
                <li>查看全部智能硬件</li>
            </ul>
        </div>
        <div class="dibu-item">
            <h3>购买渠道</h3>
            <ul class="dibu-size">
                <li>线下体验店</li>
                <li>欢太商城</li>
                <li> 官方授权网店</li>
                <li> 欢太商城客户端下载</li>
            </ul>
        </div>
        <div class="dibu-item">
            <h3>探索精彩 OPPO</h3>
            <ul class="dibu-size">
                <li> 关于 OPPO</li>
                <li> 新闻中心</li>
                <li> OPPO 社区</li>
                <li> 加入我们</li>
                <li>  知识产权</li>
                <li> 可持续发展报告</li>
                <li>安全隐私</li>
            </ul>
        </div>
        <div class="dibu-item">
            <h3>商务合作</h3>
            <ul class="dibu-size">
                <li>  企业业务</li>
                <li> 开放平台</li>
                <li> 廉洁合规</li>
                <li>  媒体联络</li>
            </ul>
        </div>
        <div class="dibu-item">
            <h3>服务与支持</h3>
            <ul class="dibu-size">
                <li>  联系我们</li>
                <li>  ColorOS</li>
                <li> 云服务</li>
                <li> 以旧换新</li>
                <li>   服务政策</li>
                <li> 预置软件公示</li>
                <li>安全响应中心</li>
            </ul>
        </div>
    </div>
</body>
<script>
    let timer = null;   //设置滑动
    let index = 0;  //当前滑动的下标
    const lunbotu=document.querySelector(".lunbtu-item");
    const header = document.querySelector('.lunbtu');
    const points = document.querySelectorAll('.yuan .lunbtu-yuan');  //点
    function lun(){
        lunbotu.style.width=(innerWidth*lunbotu.children.length)+"px";
        for (const item of lunbotu.children){
            item.style.width=innerWidth+"px";
        }
    }
    lun();
    window.onresize=lun

     // 滑动
     function lunbo() {
            let distance = -index * innerWidth;  //要滑动的距离
            lunbotu.style.transform = `translateX(${distance}px)`;
            // 判断显示激活哪个点
            points.forEach((item, i) => {
                if (i === index || (i === 0 && index === lunbotu.children.length - 1)) {
                    item.classList.add('lunbtu-yuan');
                } else {
                    item.classList.remove('lunbtu-yuan');
                }
            });
            // 如果是第二张则换成白色
            if (index === 1) {
                header.classList.add('white');
            } else {
                header.classList.remove('white');
            }
        }

        lunbotu.addEventListener('transitionend', () => {
            // 如果已经是最后一张则挪移到最前方
            if (index === lunbotu.children.length - 1) {
                lunbotu.style.transitionProperty = 'width';
                index = 0;
                lunbo();
                setTimeout(() => {
                    lunbotu.style.transitionProperty = 'transform';
                });
            }
        });

              // 启动自动滑动
        function autoSwipe() {
            timer = setInterval(() => {
                if (++index >= lunbotu.children.length) {
                    index = 0;
                }
                lunbo();
            }, 3000);
        }

        autoSwipe();
</script>
</html>